<!-- 共有账户明细 -->
<template>
	<view style="padding: 30upx;align-items: flex-start;" class="column-div">
		<!-- 日期 选择 -->
		<view class="row-div time-select-view" @click="showPicker = true">
			<!-- !year && !month ? '本月' : year && month ? `${year}年${month}月` : year? `${year}年` : `${month}月` -->
			<text>{{yearMonthText}}</text>
			<image src="/static/assets/open.png" mode=""></image>
		</view>
		
		<!-- 明细 列表-->
		<view class="detail-list-view">
			<view class="detail-item-view" v-for="(item, index) in dataList" :key="item.id">
				<view class="row-between detail-item">
					<view class="column time-view">
						<view style="font-size: 30upx;color: #999999;margin-bottom: 35upx;">{{item.date}}</view>
						<view @click="$api.previewImage(imgArr, index)">
							<text style="font-size: 24upx;color: #FE5E49;">查看账户截图</text>
							<uni-icons style="margin-left: 13upx;font-size: 24upx;color: #FE5E49;" type="arrowright"/>
						</view>
					</view>
					<view class="row-start">
						<view style="margin-right: 19upx;">
							<text style="font-size: 36upx;font-weight: bold;">{{item.money || 0}}</text>
							<text style="font-size: 22upx;">元</text>
						</view>
						<!-- <uni-icons type="arrowright" size="12" color="#999999"/> -->
					</view>
				</view>
			</view>
		</view>
		<g-empty v-if="!dataList.length"></g-empty>
		<picker-view-time v-if="showPicker" @cancel="showPicker = false" @confirm="timeConfirm"></picker-view-time>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'downUrl', 'imgSite', 'url'])
		},
		data() {
			return {
				yearMonthText:'本月',
				showPicker: false,
				year: null,
				month: null,
				dateType: 20,
				page: 1,
				dataList: [],
				imgArr: []
			}
		},
		onLoad() {
			let data = new Date()
			this.year = data.getFullYear()
			this.month = data.getMonth() + 1
			this.getRequest()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.dataList = []
			this.getRequest();
		},
		onReachBottom() {
			if (!this.dataList.length) return;
			this.page += 1;
			this.getRequest();
		},
		methods: {
			timeConfirm (e) {
				this.month = e.month || null;
				this.year = e.year || null;
				this.page = 1;
				this.dataList = []
				this.yearMonthText = this.month && this.year ? (this.dateType = 20,`${this.year}年${this.month}月`) : this.year ? (this.dateType = 10,`${this.year}年`) : ''
				this.getRequest()
			},
			timeFormat(time){
				let data = new Date(time - 0)
				let month = data.getMonth() + 1 > 10 ? data.getMonth() + 1 : `0${data.getMonth() + 1}`
				let day = data.getDay() > 10 ? data.getDay() : `0${data.getDay()}`
				/* `${data.getFullYear()}.${month}.${day} ${data.getHours()}:${data.getSeconds()}` */
				return `${data.getFullYear()}.${month}.${day}`
			},
			getRequest () {
				this.$api.showLoading()
				return this.$api.globalUtil.requestAjax({
					url: '/sharedAccountApi/sharedAccountDetail',
					method: 'POST',
					data: {
						/* balanceType: 0, */
						pageNum: this.page,
						pageSize: 10,
						year: this.year,
						month: this.dateType == 20 ? this.month : '',
						dateType: this.dateType 
					},
					success: (res) => {
						if (!res.data.success) return this.$api.msg(res.data.msg || '获取失败');
						let arr = res.data.response.results || [];
						if (!arr.length && this.page != 1) return this.$api.msg('没有更多了...');
						let imgArr = []
						arr.forEach(item => {
							imgArr.push(this.imgSite + item.image)
							item.date = this.timeFormat(item.date)
						})
						this.imgArr = [...imgArr]
						this.dataList = [...arr]
					},
					complate: () => (uni.stopPullDownRefresh(),this.$api.hideLoading())
				});
			}
					
		}
	}
</script>

<style scoped lang="scss">
	.time-select-view{
		padding: 5upx 20upx;
		background: #FFFFFF;
		border-radius: 25upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-bottom: 32upx;
		image{
			width: 16upx;
			height: 8upx;
			margin-left: 18upx;
		}
	}

	/* 明细 列表 */
	.detail-list-view{
		width: 100%;
		background: #FFFFFF;
		border-radius: 10upx;
		font-family: PingFang SC;
		.detail-item-view{
			position: relative;
			padding: 0upx 30upx 30upx 30upx;
			.detail-item{
				color: #333333;
				font-weight: 500;
				padding-top: 43upx;
				border-top: 1upx solid #EEEEEE;
			}
			&::before{
				content: "";
				position: absolute;
				width: 211upx;
				height: 50upx;
				border-top: 1px solid #EEEEEE;
				border-right: 1px solid #EEEEEE;
				border-bottom: 1px solid #EEEEEE;
				border-radius:0px 30upx 30upx 0px;
				top: 36upx;
				left: 0;
			}
			&:first-of-type .detail-item{
				border-top: none;
			}
		}
		
	}
</style>
